<template>
  <div>
    <!-- 顶部导航 -->
    <!--
      不加冒号: 值一律识别为字符串
      加冒号: 1. 识别data/computed/methods 2. 识别有效的数据类型 布尔 数组 对象
     -->
    <!--
      定义三方组件的样式
      1. 审查元素找到控制的类名
      2. 采取全局的样式 style不加scoped 注意权重问题
      3. 采取组件内部作用域样式 + 深度作用选择器  /deep/
      -->
    <van-tabs v-model="active">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <!--
          1. articleList组件会跟随tab的数量变化的
          有几个tab就会有几个articleList组件 但是同时tab组件提供了懒渲染的机制
          只有激活tab之后 对应的内容才会真正渲染

          2. article-list组件虽然被复用了多次 但是组件本身就是功能独立的 互相之间不影响
          可以各自维护各自的数据
         -->
        <article-list :channel-id="item.id" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { fetchChannels } from '@/api'
import ArticleList from './components/article-list.vue'
export default {
  name: 'home-index',
  components: {
    ArticleList
  },
  data () {
    return {
      active: 0,
      channelList: []
    }
  },
  created () {
    this.getChannels()
  },
  methods: {
    async getChannels () {
      // 参数的二次处理 格式化
      const res = await fetchChannels()
      this.channelList = res.data.channels
      // 返回数据也会有二次处理
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .van-tabs__line {
  background-color: #1989fa !important;
}
</style>
